<template>
	<div class="recording-file">
		<!-- <div class="zh-h5">
			<span>
				<router-link to="/home" tag="a">首页</router-link>
				> <span>录制文件</span>
			</span>
		</div> -->
        <nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width">
						<el-input v-model="listParam.keyword" placeholder="请输入视频名搜索"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="danger" @click="deleteMuiltVideo_confirm">批量删除</el-button>
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt"
			>
				<el-table
				    :data="listData"
				    border
				     @selection-change="tableSelectionChange"
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="视频名	"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="主讲人"
				      align="center"
				      >
				      	<template slot-scope="scope">
				      		<el-select v-model="scope.row.approveData.teacher_id" filterable placeholder="请选择主讲人">
					        	<el-option
    						      v-for="item in teacherData"
    						      :key="item.id"
    						      :label="item.name"
    						      :value="item.id">
    						    </el-option>
					      	</el-select>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="4"
				      label="视频分类"
				      align="center"
				      width="220"
				      >
				      	<template slot-scope="scope">
				      		<el-cascader
							  placeholder="请选择组织架构"
							  :options="orgData"
							  style="width:200px"
							  separator="->"
							  :props="orgDataProps"
							  v-model="scope.row.orgGroup"
							></el-cascader>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="4"
				      label="视频信息"
				      align="center"
				      >
				      	<template slot-scope="scope">
				      		<el-select v-model="scope.row.approveData.is_nice" filterable placeholder="请选择">
							    <el-option
							      v-for="item in typeOption"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="start_time"
				      label="录制开始时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				     <el-table-column
				      prop="class_name"
				      label="班级名"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="size"
				      label="大小"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      width="130"
				      show-overflow-tooltip
				      >
				      	<template slot-scope="scope">
			      			<el-button @click="videoView(scope.row.rtmp_url)" type="text">预览</el-button>
		      	        	<el-button @click="approveVideo_confirm(scope.row)" type="text">批准</el-button>
		      	        	<el-button @click="deleteVideo_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-if="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		


		<transition name="el-fade-in-linear" >
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</nativeVideo>
					</div>
				</div>
			</div>
		</transition>								
	</div>
</template>

<script>
	import nativeVideo from '../../public/nativeVideo'
  	export default {
	    data() {
		    return {
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	orgData:[],
               	orgParam:{
               		data_type:'manage_tree',
               		status:[1,2],
               		level:'<4'
	        	},
	        	orgDataProps:{
	        		value:'id',
	        		label:'name',
	        	},
		    	listData:[],
		    	listParam:{
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
		        },
		        selected:[],
		      	total_number:0,
		      	teacherData:[],
		      	addForm:{},
		      	AddFormOrgGroup: [],
		      	teacherParam:{
					org_id:0,
					role_id:6
				},
				typeOption:[
			        {
			          value: 0,
			          label: '公开课'
			        },
			        // {
			        //   value: 1,
			        //   label: '微课'
			        // }
				],
			    isActive: true,
			    showVideoPlayer:false,
				playParam:{play_url:'',},
				rowLen: 0,
		    }
		   
		},
		created(){
			this.getList();
			this.getOrgData();
			this.getTeacher();
		},
		mounted(){

		},
		methods: {
			viewClose(){
				this.showVideoPlayer = false;
				this.isActive = true
		
			},
			videoView(url){
				this.playParam.play_url = url;
				this.showVideoPlayer = true;
				this.isActive = false

			},
			approveVideo_confirm(obj){
				if( parseInt( obj.approveData.teacher_id ) === 0 || is_empty(obj.approveData.teacher_id) ){
					this.$message.warning('请选择主讲人');
					return false;
				}
				if( obj.orgGroup.length < 2 ){
					this.$message.warning('请选择正确的组织架构');
					return false;
				}
				if( parseInt( obj.approveData.is_nice ) !== 0 && parseInt( obj.approveData.is_nice ) !== 1  ){
					this.$message.warning('请选择视频信息');
					return false;
				}
				let yes = ( data => {
					obj.approveData.study_section_id = obj.orgGroup[1];
					obj.approveData.grade_id = is_empty(obj.orgGroup[2])?0:obj.orgGroup[2];
					this.approveVideo(obj.approveData);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定批准通过 '+obj.name+' 吗？'});
			},	
			approveVideo(param){
				let success = ( data => {
		    		this.$message.success(data.msg)
					this.getList();
				});
		    	this.$ajax.post('api/video/recorded_0683',param,{func:{success:success}})
			},
			getTeacher(){
				let success = ( data=>{
            		this.teacherData = data.data;
            	})
            	this.$ajax.get('api/user/user',{params: this.teacherParam,func:{success:success}})
			},
			getOrgData(){
				// 重写成功回调
				let success = ( data => {
					this.orgData = data.data;
				});
	
  				this.$ajax.get('api/org/org',{params:this.orgParam,func:{success:success}})
		    },
			getType(val){
				return this.cutType[parseInt(val)]
			},
			getMirco(val){
				return this.isMirco[parseInt(val)]
			},
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		for (var i = this.listData.length - 1; i >= 0; i--) {
            			this.listData[i].approveData = {
            				id:this.listData[i].id,
            				teacher_id:'',
            				is_nice:0,
            				study_section_id:0,
            				grade_id:0
            			}
            			this.listData[i].orgGroup=[]
            		}
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/video/recorded_0683',{params: this.listParam,func:{success:success,fail:fail}})
            },
            /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.page_index = 1;
            this.getList();
        },
            //选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    deleteVideo(id){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listData.length - this.rowLen === 0) {
						if (this.listParam.page_index > 1) {
							this.listParam.page_index-- ;
						} else {
							this.listParam.page_index = 1;
						}
					}

					this.getList();
				});
		    	this.$ajax.delete('api/video/recorded_0683',{params:{id:id},func:{success:success}})
		    },
		    deleteVideo_confirm(obj){
				let yes = ( data => {
					this.rowLen = 1;
					this.deleteVideo(obj.id);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});

			},
			deleteMuiltVideo_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
				}
				let yes = ( data => {
					this.rowLen = this.selected.length;
					this.muilDeleteVideo();
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});

			},
			muilDeleteVideo(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.deleteVideo(ids);
			}
		},
		components: {
		 	nativeVideo
		}
		
  	}
</script>
<style lang="scss">
	.recording-file {
		.el-table__body-wrapper table tbody {
			td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(9) {
				padding: 0;
			}
		}
	}
	.masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 4;
		.maskingBox{
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}


	}

	.activeLive{
		opacity: 0;
		visibility: hidden;
	}
</style>